<!--
 @description 帮助中心-类目配置
 @fileName index.vue
 @author zengqiongying
 @created 2022/01/10 09:52:20
-->
<template>
  <div>
    <el-tabs
      v-if="tabList.length"
      v-model="activeTabCode"
      @tab-click="clickTabChange"
    >
      <el-tab-pane v-for="(item,index) in tabList" :key="index" :label="item.classifyName" :name="item.classifyCode">
        <TableData ref="refTable" :tab-index="index" :classify-code="item.classifyCode" :classify-name="item.classifyName" :buttons="buttons" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getModularList } from '@/api/modular'
import { queryBtnList } from '@/api/permissions'
import TableData from './TableData'
export default {
  name: 'HelpCategory',
  components: { TableData },
  data() {
    return {
      activeTabCode: '',
      tabList: [],
      buttons: [] // 表格行内可操作按钮
    }
  },

  computed: {},

  async created() {
    this.getBtnsList()
    this.tabList = await getModularList('category')
    if (this.tabList.length) {
      this.activeTabCode = this.tabList[0].classifyCode
    }
  },
  activated() {},

  mounted() {},

  methods: {
    getBtnsList() {
      const menuCode = this.$route.query.menuCode
      if (!menuCode) return
      const buttonGroupCode = 'inRow'
      queryBtnList({ menuCode, buttonGroupCode }).then(res => {
        // res.data.groovyList
        this.buttons = (res.data && res.data.groovyList) || []
      })
    },
    clickTabChange(val) {
      this.refreshTabContent()
    },
    // 刷新当前页签表格
    refreshTabContent() {
      this.$nextTick(() => {
        const index = this.tabList.findIndex(v => v.classifyCode === this.activeTabCode)
        if (index > -1) {
          this.$refs.refTable[index] && this.$refs.refTable[index].searchTableData()
          this.$refs.refTable[index] && this.$refs.refTable[index].refreshTableHeight()
        }
      })
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
